<style>
  .customer-drawer-footer{
    width: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
  .show-info{
    font-size: 16px;
    margin-left: 60px;
    margin-bottom: 50px;
    margin-top: 50px;
    text-align: left
  }
  .show-info span:first-child {
    display: inline-block;
    width: 120px;
    margin-right: 15px;
  }
</style>
<template>
  <div>
    <Drawer
      :value="modalState"
      :closable="false"
      :title="title"
      @on-close="cancel"
      width="40%">
      <div class="show-info">
        <Row style="margin-bottom: 60px">
          <Col span="12">
            <span>创建日期：</span>
            <span>{{row.ctime ? row.ctime : '-'}}</span>
          </Col>
        </Row>
        <Row style="margin-bottom: 30px">
          <Col span='12'>
            <span>客户姓名：</span>
            <span>{{row.uname}}</span>
          </Col>
          <Col span='12'>
            <span>客户电话：</span>
            <span>{{row.tel}}</span>
          </Col>
        </Row>
        <Row style="margin-bottom: 30px">
          <Col span='12'>
            <span>云销售姓名：</span>
            <span>{{row.coludname ? row.coludname : '-'}}</span>
          </Col>
          <Col span='12'>
            <span>云销售电话：</span>
            <span>{{row.coludtel}}</span>
          </Col>
        </Row>
        <Row style="margin-bottom: 30px">
          <Col span='12'>
            <span>推荐销售：</span>
            <span>{{row.pname ? row.pname : '-'}}</span>
          </Col>
          <Col span='12' v-if="detailTitle !== '客户管理意向客户'">
            <span>接待销售：</span>
            <span>{{row.mname ? row.mname : '-'}}</span>
          </Col>
        </Row>
        <Row style="margin-bottom: 30px">
          <Col span='12'>
            <span>状态：</span>
            <span>{{row.state === '0' ? '未预约' : row.state === '1' ? '已预约' : row.state === '2' ? '未到访' : row.state === '3' ? '已到店' : row.state === '4' ? '已签约' :  row.state === '5' ? '已退款' : '-'}}</span>
          </Col>
          <Col span='12'>
            <span>结算方式：</span>
            <span>{{row.ttype && row.ttype === '1' ? '到店结算' : row.ttype === '2' ? '成交结算' : '点击结算'}}</span>
          </Col>
        </Row>
        <Row v-if="detailTitle !== '客户管理意向客户'" style="margin-bottom: 30px">
          <Col span='12'>
            <span>性别：</span>
            <span>{{row.sex === 0 ? '女' : row.sex === 1 ? '男' : '-'}}</span>
          </Col>
        </Row>
        <Row v-if="detailTitle !== '客户管理意向客户'" style="margin-bottom: 30px">
          <Col span='12'>
            <span>意向商品：</span>
            <span>{{row.gname ? row.gname : '-'}}</span>
          </Col>
        </Row>
        <Row v-if="detailTitle !== '客户管理意向客户'" style="margin-bottom: 30px">
          <Col span='12'>
            <span>客户意向度：</span>
            <span>{{row.want === '3' ? '意向度很强烈' : row.want === '2' ? '意向度较强' : row.want === '1' ? '意向度一般' : row.want === '0' ? '意向度不强' : '-'}}</span>
          </Col>
        </Row>
        <Row v-if="row.state !== '0'" style="margin-bottom: 30px">
          <Col span='12'>
            <span>预到店时间：</span>
            <span>{{row.appointime ? this.$moment(row.appointime).format('YYYY-MM-DD HH:mm:ss') : '-'}}</span>
          </Col>
          <Col span='12' v-if="row.state === '3' || row.state === '4' || row.state === '5'">
            <span>到店时间：</span>
            <span>{{row.comdate ? this.$moment(row.comdate).format('YYYY-MM-DD HH:mm:ss') : '-'}}</span>
          </Col>
        </Row>
        <Row v-if="row.state === '4' || row.state === '5'" style="margin-bottom: 30px">
          <Col span='12'>
            <span>谈单时间：</span>
            <span>{{row.difftime ? row.difftime : '-'}} min</span>
          </Col>
        </Row>
        <!-- <Row v-if="row.state === '1' && row.ttype === '1'" style="margin-bottom: 30px">
          <Col span='10'>
            <span>云销售佣金：</span>
            <span>{{row.permoney}}</span>
          </Col>
        </Row> -->
        <!-- <Row v-if="(row.state === '3' || row.state === '4' || row.state === '5') && row.tname" style="margin-bottom: 30px">
          <Col span='12'>
            <span>意向商品：</span>
            <span>{{row.tname}}</span>
          </Col>
        </Row> -->
        <Row v-if="(row.state === '3' || row.state === '4' || row.state === '5') && row.tname" style="margin-bottom: 30px">
          <Col span='12'>
            <span>年龄阶段：</span>
            <span>{{row.age === '1' ? '0~18' : row.age === '2' ? '19~25' : row.age === '3' ? '26~30' : row.age === '4' ? '31~40' : row.age === '5' ? '36~40' : row.age === '6' ? '41~45' : row.age === '7' ? '46~50' : row.age === '8' ? '51~55' : row.age === '9' ? '56~60' : row.age === '0' ? '60以上' : '-'}}</span>
          </Col>
        </Row>
        <Row v-if="row.state === '4' || row.state === '5'" style="margin-bottom: 30px">
          <Col span='12'>
            <span>签约商品：</span>
            <span>{{row.gname}}</span>
          </Col>
        </Row>
        <Row v-if="(row.state === '4' || row.state === '5')" style="margin-bottom: 30px">
          <Col span='12'>
            <span>签约金额：</span>
            <span>{{row.cprice}}</span>
          </Col>
        </Row>
        <Row v-if="(row.state === '3' && row.tname !== '' && row.ttype === '1') || row.state === '4' || row.state === '5'" style="margin-bottom: 30px">
          <Col span='12'>
            <span>云销售积分：</span>
            <span>{{row.commission}}</span>
          </Col>
        </Row>
        <Row v-if="row.state === '4' || row.state === '5'" style="margin-bottom: 30px">
          <Col span='12'>
            <span>备注：</span>
            <span>{{row.remarks ? row.remarks : '-'}}</span>
          </Col>
        </Row>
        <Row v-if="detailTitle === '客户管理流失客户'" style="margin-bottom: 30px">
          <Col span='12'>
            <span>流失时间：</span>
            <span>{{row.lostdate ? row.lostdate : '-'}}</span>
          </Col>
        </Row>
        <Row v-if="detailTitle === '客户管理流失客户'" style="margin-bottom: 30px">
          <Col span='12'>
            <span>流失原因：</span>
            <span>{{row.remarks ? row.remarks : '-'}}</span>
          </Col>
        </Row>
      </div>
      <Form
        ref="customerDrawer"
        :model="form"
        style="width: 100%"
        :rules="rules"
        :label-width="50">
        <div v-if="row.state === '0' && detailTitle === '客户管理意向客户'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">性别：</div>
          <FormItem prop="sex" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <Select v-model="form.sex" placeholder="请选择性别">
              <Option value="0">
                女
              </Option>
              <Option value="1">
                男
              </Option>
            </Select>
          </FormItem>
        </div>
        <div v-if="detailTitle !== '客户管理流失客户' && row.state !== '5'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">接待销售：</div>
          <FormItem prop="puid" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <Select v-model="form.puid">
              <Option v-for="item in nameList" :value="item.id.toString()" :key="item.id">
                {{ item.uname }}
              </Option>
            </Select>
          </FormItem>
        </div>
        <div v-if="row.state === '0' && detailTitle === '客户管理意向客户'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">客户意向度：</div>
          <FormItem prop="want" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <Select v-model="form.want" placeholder="请选择客户意向度">
              <Option value="3">
                意向度很强烈
              </Option>
              <Option value="2">
                意向度较强
              </Option>
              <Option value="1">
                意向度一般
              </Option>
              <Option value="0">
                意向度不强
              </Option>
            </Select>
          </FormItem>
        </div>
        <div v-if="row.state === '0' && detailTitle === '客户管理意向客户'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">意向商品：</div>
          <FormItem prop="gid" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <Select v-model="form.gid">
              <Option v-for="item in goodsList" :value="item.id.toString()" :key="item.id">
                {{ item.name }}
              </Option>
            </Select>
          </FormItem>
        </div>
        <div v-if="row.state === '3' && (row.ttype === '2' || row.ttype === '1' || row.ttype === '3') && row.tname !== '' && detailTitle === '客户管理到店客户'">

          <div style="margin-left: 60px; font-size: 16px; width: 120px">签约商品：</div>
          <FormItem prop="gid" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <Select v-model="form.gid">
              <Option v-for="item in goodsList" :value="item.id.toString()" :key="item.id">
                {{ item.name }}
              </Option>
            </Select>
          </FormItem>
        </div>
        <div v-if="row.state === '3' && row.tname !== '' && detailTitle === '客户管理到店客户' && (row.ttype === '2' || row.ttype === '1' || row.ttype === '3')">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">签约金额：</div>
          <FormItem prop="cprice" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <Input v-model="form.cprice" type="text" placeholder="请输入签约金额" />
          </FormItem>
        </div>
        <div v-if="row.state === '3' && row.tname !== '' && detailTitle === '客户管理到店客户' && row.ttype === '2'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">云销售积分：</div>
          <FormItem prop="commission" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <Input v-model="form.commission" type="text" :placeholder="form.cprice*row.perrate ? (form.cprice*row.perrate).toString() : '请输入云销售积分'" />
          </FormItem>
        </div>
        <div v-if="row.state === '1' && row.ttype === '1' && detailTitle !== '客户管理流失客户'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">云销售积分：</div>
          <FormItem prop="commission" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <Input v-model="row.permoney" type="text" placeholder="请输入云销售积分" />
          </FormItem>
        </div>
        <!-- <div v-if="row.state === '3' && row.tname !== '' && detailTitle === '客户管理到店客户' && row.ttype === '1'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">云销售佣金：</div>
          <FormItem prop="permoney" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <Input v-model="form.permoney" type="text" placeholder='请输入云销售佣金' />
          </FormItem>
        </div> -->
        <div v-if="row.state === '0' && detailTitle !== '客户管理流失客户'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">预到店时间：</div>
          <FormItem prop="appointime" style="width: 460px; margin-left: 140px; margin-top: -23px">
            <Row>
              <Col span="11">
                <FormItem prop="date">
                  <DatePicker v-model="form.date" type="date" placeholder="请选择日期"></DatePicker>
                </FormItem>
              </Col>
              <Col span="2" style="text-align: center">-</Col>
              <Col span="11">
                <FormItem prop="time">
                  <TimePicker v-model="form.time" type="time" placeholder="请选择时间"></TimePicker>
                </FormItem>
              </Col>
            </Row>
          </FormItem>
        </div>
        <div v-if="row.state === '2' && detailTitle !== '客户管理流失客户'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">新预到店时间：</div>
          <FormItem prop="appointime" style="width: 460px; margin-left: 140px; margin-top: -23px">
            <Row>
              <Col span="11">
                <FormItem prop="date">
                  <DatePicker v-model="form.date" type="date" placeholder="请选择日期"></DatePicker>
                </FormItem>
              </Col>
              <Col span="2" style="text-align: center">-</Col>
              <Col span="11">
                <FormItem prop="time">
                  <TimePicker v-model="form.time" type="time" placeholder="请选择时间"></TimePicker>
                </FormItem>
              </Col>
            </Row>
          </FormItem>
        </div>
        <!-- <div v-if="row.state === '1' && detailTitle === '客户管理预约客户'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">预到店时间：</div>
          <FormItem prop="appointime" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <DatePicker v-model="form.appointime" type="date" placeholder="请输入预约时间"></DatePicker>
          </FormItem>
        </div> -->
        <div v-if="row.state === '1' && detailTitle === '客户管理预约客户'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">年龄：</div>
          <FormItem prop="age" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <Select v-model="form.age" placeholder="请选择年龄范围">
              <Option value="1">
                0~18
              </Option>
              <Option value="2">
                19~25
              </Option>
              <Option value="3">
                26~30
              </Option>
              <Option value="4">
                31~35
              </Option>
              <Option value="5">
                36~40
              </Option>
              <Option value="6">
                41~45
              </Option>
              <Option value="7">
                46~50
              </Option>
              <Option value="8">
                51~55
              </Option>
              <Option value="9">
                56~60
              </Option>
              <Option value="0">
                60以上
              </Option>
            </Select>
          </FormItem>
        </div>
        <div v-if="row.state !== '4' && row.state !== '5' && detailTitle !== '客户管理流失客户'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">备注：</div>
          <FormItem prop="remarks" style="width: 500px; margin-left: 140px; margin-top: -23px">
            <Input v-model="row.remarks" :rows="4" type="textarea" placeholder="请输入备注信息" />
          </FormItem>
        </div>
      </Form>
      <div class="customer-drawer-footer">
        <Button style="margin-right: 8px" @click="cancel">{{cancelTitle}}</Button>
        <Button v-if="detailTitle !== '客户管理流失客户' && row.state !== '5'" type="primary" @click="handleSubmit">确认</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'CustomerDrawer',
  props: {
    row: {},
    detailTitle: ''
  },
  mounted () {
    // console.log(this.row)
  },

  data () {
    return {
      title: '',
      loading: true,
      cancelTitle: this.detailTitle === '客户管理流失客户' ? '返回' : '取消',
      form: {
        appointime: '',
        // newreservetime: '',
        tname: '',
        time: '',
        date: '',
        gid: null,
        // yxcommodity: '',
        puid: null,
        commission: '',
        cprice: '',
        remarks: '',
        sex: '',
        want: '',
        age: ''
      },
      rules: {
        sex: [
          {
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }
        ],
        puid: [
          {
            required: true,
            message: '请选择接待销售',
            trigger: 'change'
          }
        ],
        want: [
          {
            required: true,
            message: '请选择客户意向度',
            trigger: 'change'
          }
        ],
        gid: [
          {
            required: true,
            message: '请选择商品',
            trigger: 'change'
          }
        ],
        date: [
          {
            required: true,
            message: '请选择日期',
            trigger: 'change',
            type: 'date'
          }
        ],
        time: [
          {
            required: true,
            message: '请选择时间',
            trigger: 'change',
            type: 'string'
          }
        ],
        age: [
          {
            required: true,
            message: '请选择年龄段',
            trigger: 'change'
          }
        ],
        cprice: [
          {
            required: true,
            message: '请输入签约金额',
            trigger: 'blur'
          }
        ]
        // commission: [
        //   {
        //     required: true,
        //     message: '请输入积分',
        //     trigger: 'blur'
        //   }
        // ],
      }
    }
  },
  updated () {
    this.title = '客户详情页'
  },
  computed: {
    ...mapState({
      // row: state => state.taskList.row,
      modalState: state => state.modal.customerDrawerState,
      goodsList: state => state.goodService.goodsList,
      nameList: state => state.arrive.nameList
    })
  },
  methods: {
    ...mapActions(['updateCustomerDrawerState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.customerDrawer.validate(valid => {
        if (!valid) {
          return this.changeLoading()
        }

        this.$emit('customer-valid', {
          customer: this.$refs['customerDrawer'],
          id: this.row.id,
          state: this.row.state,
          appointime: this.form.date ? `${this.$moment(this.form.date, this.$moment.ISO_8601).format('YYYY-MM-DD')} ${this.form.time}` : '',
          // time: this.form.time,
          // newreservetime: this.form.newreservetime ? this.$moment(this.form.newreservetime, this.$moment.ISO_8601).format('YYYY-MM-DD') : '',
          tname: this.form.tname,
          gid: this.form.gid,
          gname: this.form.gid ? this.goodsList.filter((item) => item.id.toString() === this.form.gid)[0].name : '',
          // yxcommodity: this.form.yxcommodity,
          commission: this.form.commission ? this.form.commission
            : this.form.cprice * this.row.perrate,
          puid: this.form.puid,
          permoney: this.form.permoney ? this.form.permoney : this.row.permoney,
          comprice: this.row.permoney ? this.row.permoney : '',
          cprice: this.form.cprice,
          remarks: this.row.remarks,
          sex: this.form.sex,
          want: this.form.want,
          age: this.form.age
        })
      })
    },
    cancel () {
      this.updateCustomerDrawerState(false)
      this.$refs['customerDrawer'].resetFields()
    }
  }
}
</script>
